<template>
  <div id="theme" class="container">
    <div class="content">
      <el-tabs class="tab-card tabs-white" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane :label="$t('已安装模板')" name="first">
          <Moulded v-if="activeName == 'first'" />
        </el-tab-pane>
        <el-tab-pane :label="$t('系统模板')" name="second">
          <el-table :data="themeList" v-if="activeName == 'second'">
            <el-table-column :label="$t('模板')" prop="theme" />
            <el-table-column :label="$t('版本号')" prop="version" />
            <el-table-column :label="$t('语言')" prop="lang" />
            <el-table-column :label="$t('作者')" prop="author" />
            <el-table-column :label="$t('模板描述')" prop="description" />
            <el-table-column :label="$t('操作')" align="right">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="$t('安装模板')" placement="top">
                  <el-button type="text" icon="el-icon-set-up" @click="install(scope.row)"></el-button>
                </el-tooltip>

                <DelBtn @success="goDele(scope.row)" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <BaseDialog :title="$t('安装模板')" :dialog-show.sync="dialogShow" width="50%" class="dialog">
        <el-form ref="themeForm" :model="themeForm" :rules="themeRules" label-position="top">
          <el-form-item :label="`${$t('模板')}:`" prop="theme">
            <el-input v-model="themeForm.theme" disabled />
          </el-form-item>
          <el-form-item :label="`${$t('站点')}:`" prop="website_id">
            <el-select v-model="themeForm.website_id" :placeholder="$t('请选择站点')" disabled style="width: 100%"
              @change="handleChange">
              <el-option v-for="item in options" :key="item.id" :label="item.domain" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`${$t('语言')}:`" prop="lang">
            <el-select v-model="themeForm.lang" style="width: 100%" :placeholder="$t('请选择语言')">
              <el-option v-for="item in themeLang" :key="item.id" :label="item.lang" :value="item.lang" />
            </el-select>
          </el-form-item>
          <div class="btn">
            <el-button @click="dialogShow = false">{{ $t('取消') }}</el-button>
            <el-button type="primary" :loading="loading" @click="submittheme()">
              {{ $t('提交') }}
            </el-button>
          </div>
        </el-form>
      </BaseDialog>
    </div>
  </div>
</template>
<script>
import Moulded from './components/installedMould.vue'
import themeApi from '@/api/theme.js'
import websiteApi from '@/api/website.js'
import langApi from '@/api/websetting'
export default {
  components: {
    Moulded
  },
  data() {
    return {
      activeName: 'first',
      themeList: [],
      dialogShow: false,
      options: [],
      themeForm: {
        website_id: ''
      },
      themeRules: {
        website_id: [
          { required: 'true', message: this.$t('请选择站点'), trigger: 'blur' }
        ]
      },
      themeLang: [],
      loading: false
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.themeForm.website_id = val
    },
    activeName: {
      handler(name) {
        if (name == 'second') {
          this.getList()
        }
      }
    }
  },
  created() {
    this.themeForm.website_id = this.$store.getters.siteId
    this.getList()
    if (this.themeForm.website_id) {
      this.getLang()
    }
  },
  methods: {
    // 站点语言列表
    getLang() {
      langApi.langInfo({ site_id: this.themeForm.website_id }).then(res => {
        this.themeLang = res.data
      })
    },
    // 系统模板
    getList() {
      themeApi.themeList().then(res => {
        this.themeList = res.data
      })
    },
    // 模板安装
    install(row) {
      this.getWeblist()
      this.getLang()
      this.themeForm.theme = row.theme
      this.dialogShow = true
    },
    // 模板删除
    goDele(row) {
      themeApi.deleteTheme({ theme: row.theme }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    submittheme() {
      this.loading = true
      themeApi.saveTheme({ ...this.themeForm }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.dialogShow = false
        }
        this.loading = false
      })
    },
    // 获取站点列表
    getWeblist() {
      websiteApi.websiteList().then(res => {
        this.options = res.data
        this.themeForm.website_id = this.$store.getters.siteId
      })
    },
    handleChange(val) { },
    handleClick(tab, event) { }
  }
}
</script>
<style lang="scss">
#theme {
  .el-form-item {
    width: 100%;
  }

  .el-form-item__content {
    width: calc(100% - 80px);
  }
}
</style>
<style lang="scss" scoped>
.el-button ::v-deep {
  .el-icon-set-up {
    font-weight: bold;
  }
}
</style>
